import React, { FC, useEffect, useState } from 'react';
import * as echarts from 'echarts';
interface IEChartsProps {
  
};

const ECharts:FC<IEChartsProps> = () => {
  useEffect(() => {
    var myBarChart = echarts.init(document.getElementById('barECharts') as HTMLDivElement);
    const option = {
      // title: {
      //   text: 'Stacked Area Chart'
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['清爽果茶', '鲜冰淇淋', '现煮奶茶', '奶盖纯茶', '现磨咖啡']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '清爽果茶',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [620, 632, 601,734, 890, 923, 1210,1220, 1182, 1191, 834, 790,]
        },
        {
          name: '鲜冰淇淋',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [320, 282, 291, 334, 390, 530, 710,850, 732, 601, 354, 290,]
        },
        {
          name: '现煮奶茶',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [650, 632, 601, 654, 690, 630, 610,620, 682, 691, 634, 690 ]
        },
        {
          name: '奶盖纯茶',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [320, 332, 301, 334, 390, 330, 320,150, 232, 201, 154, 190, 330,]
        },
        {
          name: '现磨咖啡',
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [520, 532, 501, 434, 490, 330, 320, 220, 232, 301, 334, 490,]
        }
      ]
    }
    myBarChart.setOption(option)
  }, [])



  return (
    <>
          <h2>各系列销售对比</h2>
          <div id="barECharts" style={{ width: '100%', height: 500, backgroundColor: '#efefef'}}></div>

    </>
  )
};

export default ECharts;